<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../index/css/shouye.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/mock-min.js"></script>
    <script src="../js/mock.js"></script>
    <style>
        .divleft{
            float: left;
            width: 700px;
            margin-top: 40px;
            margin-left: 40px;
            font-size: 20px;
        }
        .divleft table{
            width: 800px;
            line-height: 100px;
        }
        .divleft table img{
            width: 100px;
            height: 100px;
            float: left;
        }
        .but{
            width: 20px;
            height: 20px;

        }
        .divright{
            margin-top: 80px;
            margin-left: 20px;
            width: 200px;
            float: left;
        }
         
        .line{
            border:3px solid #04a0e3;
            display:inline-block;
            width:200px;
            margin-left: -4px;
        }
    </style>
</head>
<body>
    <header>
        <section>
            <img src="../../index/img/logo.webp" alt="">
        </section>
        <section>
            <ul>
                <li><a href="../../index/view/index.html">首页</a></li>
                <li><a href="../../关于/view/关于.html">关于</a></li>
                <li><a href="../../view/yitao/showTea.html">茶叶</a></li>
                <li><a href="../../马元锋作业/view/jidi.html">基地</a></li>
                <li><a href="../../新闻/view/news-index.html">新闻</a></li>
                <li><a href="../../联系/view/lianxi.html">联系</a></li>
            </ul>
            <ul>
                <li><a href=""><img src="../../index/img/搜索.png" alt=""></a></li>
                <li><a href=""><img src="../../index/img/用户名.png" alt=""></a></li>
                <li><a href=""><img src="../../index/img/购物车.png" alt=""></a></li>
            </ul>
        </section>
    </header>
    <div class="bigdiv">
        <div class="divleft">
            <table >
                <tr>
                    <td>商品</td>
                    <td>价格</td>
                    <td>数量</td>
                    <td>合计</td>
                </tr>
            </table>
        </div>
        <div class="divright">
            <h2>购物车总计</h2>
            <div class="line"></div>
            <div>
                <p id="enddo">购物车小计￥421</p>
            </div>
            <div>
                <p>运费:无</p>
            </div>
            <div class="line"></div>
            <div id="akk">
                <p>订单总计</p>
            </div>
            <div class="line"></div>
            <button>前往收银台</button>
        </div>
    </div>
    <script>
        let arrmoney
         $.ajax({
                type:'get',
                url:'/js/Mycar',
                success:function(data){
                    arrmoney=JSON.parse(data)
                }
            })
        var allone
        var alladd
        var allinp
        function getall(){
            allone= document.querySelectorAll('#one')
            alladd= document.querySelectorAll('#add')
            allinp=document.getElementsByTagName('input')
        }
        function deltea(tea){
          console.log(tea.id);
          var alltea=JSON.parse(localStorage.ShopCar)
          for(i=0;i<alltea.length;i++){
                var willdeleteid=alltea[i]
                if(willdeleteid.id==tea.id){
                    alltea.splice(i,1)
                    localStorage.ShopCar=JSON.stringify(alltea)
                    location.reload()    
                }
            } 
        }
        function checkallmoney(){
            getall()
            var alltitle=0
            var allmoney=0
            for(i=0;i<allinp.length;i++){
                alltitle+=parseInt(allinp[i].value)
                allmoney+=parseInt(allinp[i].value)*arrmoney[i]
            }
            document.getElementById('enddo').innerText=`购物车小计￥${allmoney}`
            document.getElementById('akk').innerText=`订单总计￥${allmoney}`
        }
        function allinpdo(b){
            getall()
            allinp[b].value==1 ? alert('最少为1'):allinp[b].value--
            checkallmoney()
        }    
        function alladddo(b){
            getall()
            allinp[b].value++
            checkallmoney()
        }  
    </script>
</body>
</html>